<template>
	<view class="live-container">

		<!-- 顶部导航栏 -->
		<view class="top-nav">
			<view class="nav-tabs">
				<view class="nav-tab" :class="{ active: currentLiveTab === 'live' }" @click="switchLiveTab('live')">
					<text class="tab-text">正在直播</text>
				</view>
				<view class="nav-tab" :class="{ active: currentLiveTab === 'upcoming' }" @click="switchLiveTab('upcoming')">
					<text class="tab-text">未直播</text>
				</view>
			</view>
			<!-- 通知图标 -->
			<view class="notification-container">
				<notification-badge></notification-badge>
			</view>
		</view>

		<!-- 正在直播列表 -->
		<scroll-view v-if="currentLiveTab === 'live'" class="live-scroll" scroll-y @scrolltolower="loadMore" @refresherrefresh="onRefresh"
			refresher-enabled :refresher-triggered="isRefreshing">
			<view class="live-list" v-if="liveList.length > 0">
				<view class="live-card" v-for="(item, index) in liveList" :key="index" @click="enterLiveRoom(item)">
					<view class="teacher-avatar">
						<text class="avatar-text">{{ getFirstChar(item.title) }}</text>
					</view>
					<view class="live-info">
						<view class="title-row">
							<text class="course-title">{{ item.title }}</text>
							<view class="live-status">直播中</view>
						</view>
						<text class="teacher-name">{{ item.teacherName }}</text>
						<view class="stats-row">
							<view class="stats-item">
								<uni-icons type="eye" size="14" color="#999" />
								<text class="stats-text">{{ item.viewCount }}人观看</text>
							</view>
							<text class="stats-text">{{ item.startTime }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-else>
				<image class="empty-image" :src="emptyImageUrl" mode="aspectFit" />
				<text class="empty-text">暂无正在直播的课程</text>
				<button class="subscribe-btn" @click="onSubscribe">订阅课程提醒</button>
			</view>
		</scroll-view>

		<!-- 未直播列表 -->
		<scroll-view v-if="currentLiveTab === 'upcoming'" class="live-scroll" scroll-y @scrolltolower="loadMore" @refresherrefresh="onRefresh"
			refresher-enabled :refresher-triggered="isRefreshing">
			<view class="live-list" v-if="upcomingList.length > 0">
				<view class="live-card" v-for="(item, index) in upcomingList" :key="index" @click="enterLiveRoom(item)">
					<view class="teacher-avatar">
						<text class="avatar-text">{{ getFirstChar(item.title) }}</text>
					</view>
					<view class="live-info">
						<view class="title-row">
							<text class="course-title">{{ item.title }}</text>
							<view class="upcoming-status">未开始</view>
						</view>
						<text class="teacher-name">{{ item.teacherName }}</text>
						<view class="stats-row">
							<view class="stats-item">
								<uni-icons type="calendar" size="14" color="#999" />
								<text class="stats-text">{{ item.startDate }}</text>
							</view>
							<text class="stats-text">{{ item.startTime }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-else>
				<image class="empty-image" :src="emptyImageUrl" mode="aspectFit" />
				<text class="empty-text">暂无未开始的直播课程</text>
				<button class="subscribe-btn" @click="onSubscribe">订阅课程提醒</button>
			</view>
		</scroll-view>

		<!-- AI悬浮助教 -->
		<ai-assistant></ai-assistant>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { checkVerification } from '@/utils/verification.js';
	import { onLoad } from '@dcloudio/uni-app';
	import NotificationBadge from '@/components/notification-badge/notification-badge.vue';

	const emptyImageUrl = 'https://ai-public.mastergo.com/ai/img_res/f05c94c34b31acd1148014952b1ef89b.jpg';
	
	// 当前选中的直播标签页
	const currentLiveTab = ref('live');
	
	// 是否正在刷新
	const isRefreshing = ref(false);

	const liveList = ref([
		{
			avatar: 'https://ai-public.mastergo.com/ai/img_res/757d6647375a669cbf9e1cbaa65572d7.jpg',
			title: '高等数学',
			teacherName: '张教授',
			viewCount: 128,
			startTime: '09:00',
			id: 1
		},
		{
			avatar: 'https://ai-public.mastergo.com/ai/img_res/757d6647375a669cbf9e1cbaa65572d7.jpg',
			title: '大学英语',
			teacherName: '李老师',
			viewCount: 86,
			startTime: '10:30',
			id: 2
		},
		{
			avatar: 'https://ai-public.mastergo.com/ai/img_res/757d6647375a669cbf9e1cbaa65572d7.jpg',
			title: '计算机基础',
			teacherName: '王教授',
			viewCount: 256,
			startTime: '14:00',
			id: 3
		}
	]);

	const upcomingList = ref([
		{
			avatar: 'https://ai-public.mastergo.com/ai/img_res/757d6647375a669cbf9e1cbaa65572d7.jpg',
			title: '数据结构',
			teacherName: '陈教授',
			startDate: '2023-06-15',
			startTime: '09:00',
			id: 4
		},
		{
			avatar: 'https://ai-public.mastergo.com/ai/img_res/757d6647375a669cbf9e1cbaa65572d7.jpg',
			title: '算法分析',
			teacherName: '刘老师',
			startDate: '2023-06-16',
			startTime: '10:30',
			id: 5
		}
	]);
	
	// 切换直播标签页
	const switchLiveTab = (tab: string) => {
		currentLiveTab.value = tab;
	};

	const goBack = () => {
		uni.navigateBack();
	};

	const onSearch = () => {
		uni.showToast({ title: '搜索功能开发中', icon: 'none' });
	};

	const enterLiveRoom = (item: any) => {
		// 跳转到直播间页面
		uni.navigateTo({
			url: '/pages/liveroom/liveroom?id=' + item.id
		});
	};

	const loadMore = () => {
		uni.showToast({ title: '加载更多', icon: 'none' });
	};

	const onRefresh = () => {
		isRefreshing.value = true;
		setTimeout(() => {
			isRefreshing.value = false;
			uni.showToast({ title: '刷新成功', icon: 'none' });
		}, 1000);
	};

	const onSubscribe = () => {
		uni.showToast({
			title: '订阅成功',
			icon: 'success'
		});
	};
	
	// 获取首字符用于头像显示
	const getFirstChar = (title: string) => {
		return title.charAt(0);
	};
</script>

<style>
	page {
		height: 100%;
	}

	.live-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F5F7FA;
	}

	/* 顶部导航栏样式 */
	.top-nav {
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #f0f0f0;
		position: relative;
	}
	.notification-container {
		position: absolute;
		top: 200px;
		right: 2rpx;
		z-index: 10;
		position: fixed;
	}

	.nav-tabs {
		display: flex;
		background-color: #f5f5f5;
		border-radius: 12rpx;
		padding: 4rpx;
	}

	.nav-tab {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16rpx 0;
		border-radius: 8rpx;
		transition: all 0.3s ease;
	}

	.nav-tab.active {
		background-color: #ffffff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.tab-text {
		font-size: 16px;
		font-weight: 500;
		color: #666;
		transition: color 0.3s ease;
	}

	.nav-tab.active .tab-text {
		color: #007AFF;
	}



	.live-scroll {
		flex: 1;
		overflow: auto;
	}

	.live-list {
		padding: 20rpx;
	}

	.live-card {
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.teacher-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
		background: linear-gradient(135deg, #007AFF, #64B5F6);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
	}

	.avatar-text {
		font-size: 32px;
		font-weight: bold;
		color: #ffffff;
	}

	.live-info {
		flex: 1;
	}

	.title-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12rpx;
	}

	.course-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}

	.live-status {
		font-size: 12px;
		color: #fff;
		background-color: #FF4B4B;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
	}

	.upcoming-status {
		font-size: 12px;
		color: #fff;
		background-color: #FF9800;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
	}

	.teacher-name {
		font-size: 14px;
		color: #666;
		margin-bottom: 12rpx;
		display: block;
	}

	.stats-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.stats-item {
		display: flex;
		align-items: center;
	}

	.stats-text {
		font-size: 12px;
		color: #999;
		margin-left: 8rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 160rpx;
	}

	.empty-image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 40rpx;
	}

	.empty-text {
		font-size: 14px;
		color: #999;
		margin-bottom: 40rpx;
	}

	.subscribe-btn {
		background-color: #4A90E2;
		color: #fff;
		font-size: 14px;
		padding: 0 60rpx;
	}
</style>